<template>
  <div>
    <ul class="nb-container">
      <li class="nb-base-box" v-for="(v,i) in num_attr_list" :style="{'bottom':v.anim_s+'rem','left':.12*i +'rem'}" :key="'v'+i">
        <span v-for="(v1,j) in v.narr" :key="'v1'+j">{{j+1}}</span>
        <i v-if="!v.narr.length">{{v.value}}</i>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name:'numberRoll',
  props:{
    num:{
      type:Number/String,
      default:'91.640vvv98'
    }
  },
  mounted(){
    this.getAttrList(this.num)
  },
  data(){
    return {
      step:3,
      num_attr_list:[],
    }
  },
  watch:{
    num(nv){
      this.getAttrList(nv);
    }
  },
  methods:{
    //翻动动画
    moveUpInterval(i){
      let v=this.num_attr_list[i], lg=v.lh/3;
      if(typeof v.value=="number"){
        v.interval=setInterval(()=>{
          v.anim_s+=lg;
          if(v.anim_s> -lg){
            v.anim_s=0;
            clearInterval(v.interval);
            v.interval=null;
          }
        },25)
      }
    },
    //数字格式化
    getAttrList(num){
      let arr=null;
      if(num!=void 0){arr=num.toString().split('')}
      this.num_attr_list=[];
      if(Array.isArray(arr)){
        arr.forEach((v,i)=>{
          if(!isNaN(v-0)){
            this.num_attr_list.push({
              value:v-0,
              lh:0.2,
              anim_s:- 0.2*v,
              interval:null,
              narr:new Array(v-0)
            })
          }else{
            this.num_attr_list.push({
              value:v,
              lh:0,
              anim_s:0,
              interval:null,
              narr:[]
            })
          }
          this.moveUpInterval(i);
        })
        // console.log(this.num_attr_list)
      }
    }
  }
}
</script>
<style scoped lang="stylus">
.nb-container{
  height:.2rem;
  width:100%;
  position:relative;
  border:1px solid red;
  box-sizing:border-box;
  // overflow:hidden;
}
.nb-base-box{
  position:absolute;
  display:inline-block;
  display:flex;
  flex-direction:column;
  font-size:.16rem;
  line-height:.2rem;
}
</style>

